import React, { useEffect, useState, useMemo, useReducer } from 'react'

import { Route, Routes, Link, NavLink, Navigate, useNavigate, useLocation } from 'react-router-dom'
import { Badge, TabBar } from 'antd-mobile'
import {
    EyeOutline,
    AppOutline,
    TruckOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'

import './App.scss'

import Home from './views/Home'
import Login from './views/Login'
import Reg from './views/Reg'
import Discover from './views/Discover'
import Man from './views/discover/Man'
import Lady from './views/discover/Lady'
import Sport from './views/discover/Sport'

import Mine from './views/Mine'
import Cart from './views/Cart'
import Search from './views/Search'
import Goods from './views/Goods'

import NotFound from './views/NotFound'

import context from './utils/context'

// 方案一：useReducer+content实现全局状态
let userInfo = localStorage.getItem('userInfo')
try {
    userInfo = JSON.parse(userInfo) || {}
} catch (err) {
    userInfo = {}
}

const initState = {
    userInfo,
}
const reducer = function (state,action) {
    switch(action.type){
        // {type:'login',userInfo:data.data}
        case 'login':
            return {
                ...state,
                userInfo:action.userInfo
            }
        case 'logout':
            return {
                ...state,
                userInfo:{}
            }

    }
}



function App() {
    const tabs = [
        {
            path: '/home',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            path: '/discover',
            title: '发现',
            icon: <EyeOutline />,
        },
        {
            path: '/cart',
            title: '购物车',
            icon: <TruckOutline />,
            badge: '5',
        },
        {
            path: '/mine',
            title: '我的',
            icon: <UserOutline />,
        },
    ]

    const navigate = useNavigate()
    const changeTab = function (path) {
        // console.log('key', key)
        navigate(path)
    }

    // 高亮Tabbar
    // 获取当前路径
    const { pathname } = useLocation(); console.log('location', location)

    // 获取用户信息
    // const [userInfo, setUserInfo] = useState({})
    // useEffect(() => {
    //     let userInfo = localStorage.getItem('userInfo')
    //     try {
    //         userInfo = JSON.parse(userInfo) || {}
    //     } catch (err) {
    //         userInfo = {}
    //     }
    //     setUserInfo(userInfo)
    // }, [])

    const [{userInfo}, dispatch] = useReducer(reducer, initState)


    const isLogin = useMemo(() => !!userInfo.authorization, [userInfo])

    return (
        <context.Provider value={{ userInfo,dispatch }}>
            <div className='container'>
                <main>
                    <Routes>
                        <Route path="/home" element={<Home />} />
                        <Route path="/reg" element={<Reg />} />
                        <Route path="/login" element={<Login />} />
                        {/* <Route path="/discover" element={<Discover />} /> */}

                        {/* 动态路由 */}
                        {/* <Route path="/discover/:id" element={<Discover />} /> */}

                        {/* 嵌套路由 */}
                        <Route path="/discover" element={<Discover />}>
                            {/* 当路由匹配/discover/man时，渲染element中的组件 */}
                            <Route path="man" element={<Man />} />
                            <Route path="lady" element={<Lady />} />
                            <Route path="sport" element={<Sport />} />
                            <Route path="" element={<Navigate to="man" />} />
                            <Route path="*" element={<NotFound />} />
                        </Route>


                        <Route path="/cart" element={<Cart />} />
                        <Route path="/mine" element={<Mine />} />
                        <Route path="/search" element={<Search />} />
                        <Route path="/goods" element={<Goods />} />
                        <Route path="/goods/:id" element={<Goods />} />
                        <Route path="/" element={<Navigate to="/home" />} />
                    </Routes>

                </main>
                <TabBar onChange={changeTab} defaultActiveKey={pathname}>
                    {tabs.map(item => (
                        <TabBar.Item key={item.path} icon={item.icon} title={isLogin && item.path === '/mine' ? userInfo.username : item.title} badge={item.path === '/cart' ? <span>{item.badge}</span> : null} />
                    ))}
                </TabBar>
            </div>
        </context.Provider>
    )
}


export default App;